<template>
	<view>
		<view class="" id="topBox">
			<search @choose="chooseSearch" :data="scrollData" :add="false" @recorder="openRecorderPopup" page="stockOutFood"></search>
			<u-line></u-line>
		</view>
		<template v-if="scrollHeight && scrollMenu.length>0">
			<stockMaterialList :data="scrollData" :menu="scrollMenu" :height="scrollHeight" :scroll_id="scrollViewId"
				:isedit="true" @updata="updataBagList" :init_value="scrollInitValue" :loadtime="loadtime" page="stockOutFood"></stockMaterialList>
		</template>
		<view class="fixed-bottom" id="bottomBox">
			<u-line></u-line>
			<view class="flex bgw">
				<view class="bag-btn flex justify-center" @click="openBag">
					<u-badge type="error" :isDot="true" :absolute="true" :offset="[0, 0]"
						v-if="bagList.length > 0"></u-badge>
					<u-icon name="bag-fill" size="20" color="#675f91"></u-icon>
				</view>
				<view class="flex-1" v-if="bagList.length > 0">
					共 <text class="font-bold">{{ bagList.length }}</text>
					种食材
				</view>
				<view class="flex-1 text-red" v-else> 请添加食材 </view>
				<view :class="bagList.length == 0 ? 'disabled' : ''" class="save-btn ml15" @click="save">
					确认
				</view>
			</view>
		</view>
		<u-popup :show="popupShow" @close="popupClose" @open="popupOpen" mode="bottom" :closeable="true">
			<view class="flex justify-center" style="background-color: #f5f5f5; height: 44px">
				<view> 已添加的食材 </view>
			</view>
			<scroll-view scroll-y scroll-with-animation class="popup-scroll">
				<view class="">
					<template v-for="v in bagList">
						<view class="wrapper">
							<view class="blank10"></view>
							<view class="flex">
								<view class="flex-1">
									{{v.name}}
								</view>
								<view style="width: 150upx;">
									{{v.value}}
								</view>
							</view>
							<view class="blank10"></view>
							<u-line color="#e6e6e6"></u-line>
						</view>
					</template>
				</view>
			</scroll-view>
			<view class="wrapper" style="background-color: #f5f5f5">
				<view class="blank20"></view>
				<u-row justify="space-between" gutter="10">
					<u-col span="6">
						<u-button type="info" text="关闭" @click="popupShow = false"></u-button>
					</u-col>
					<u-col span="6">
						<u-button type="primary" :disabled="bagList.length == 0" text="确认" @click="save"></u-button>
					</u-col>
				</u-row>

				<view class="blank20"></view>
			</view>
		</u-popup>
		<recorder-popup :open="recorderPopupOpen" @close="closeRecorderPopup" @add="addRecorderPopup" :data="scrollData" page="stockOutFood"></recorder-popup>
	</view>
</template>

<script>
	import stockMaterialList from "@/components/stock-material-list/stock-material-list.vue";
	import search from "@/components/search.vue";
	import recorderPopup from "@/pagesA/components/recorder-popup/recorder-popup.vue";

	import {
		new_stock_out,
		confirm_to_stock_out
	} from "@/common/api.js";

	let date = new Date();
	let year_month_day =
		`${date.getFullYear()}` +
		`-` +
		`${date.getMonth() + 1}`.padStart(2, "0") +
		`-` +
		`${date.getDate()}`.padStart(2, "0");

	export default {
		components: {
			stockMaterialList,
			search,
			recorderPopup
		},
		data() {
			return {
				scrollViewId: 0,
				scrollHeight: '',
				scrollData: [],
				scrollMenu: [],
				id: 0,
				popupShow: false,
				need_day: year_month_day, //默认今天
				need_date: year_month_day,
				bagList: [],
				record_list: [],
				material_obj: {},
				loadtime:0,
				bagList:[],
				scrollInitValue:[],
				recorderPopupOpen:false,
			};
		},
		computed: {},
		methods: {
			openRecorderPopup(){
				console.log('openRecorderPopup');
				this.recorderPopupOpen = true;
			},
			closeRecorderPopup(){
				this.recorderPopupOpen = false;
			},
			addRecorderPopup(data){
				// console.log(data);
				let {material_id,unit_id,qty} = data;
				let bagItem = this.bagList.find(v=>v.id == material_id);
				if(bagItem){
					bagItem.value += qty;
				}else{
					let material = this.material_obj[material_id];
					bagItem = {
						id: material_id,
						name: material.mname,
						stock_cost: material.stock_cost,
						stock_qty: material.stock_qty,
						value:qty,
						unit_id: material.main_unit_id[0],
						unit_name: material.main_unit_id[1],
					}
					this.bagList.push(bagItem);
				}
				this.scrollInitValue = this.bagList;
				// this.closeRecorderPopup();
				this.chooseSearch(material_id);
			},
			updataBagList(bagList) {
				// console.log(bagList);
				this.bagList = bagList;
			},
			chooseSearch(id) {
				this.scrollViewId = id;
			},
			openBag() {
				this.popupShow = true;
			},
			popupClose() {
				this.popupShow = false;
			},
			popupOpen() {},
			save() {
				if (this.bagList.length == 0) {
					uni.$u.toast("请添加食材");
					return;
				}
				let bagList = JSON.stringify(this.bagList);
				this.nav('/stockOutEdit/stockOutEdit?bagList='+bagList);
			},

			getData_callback(res) {
				let scrollData = res.result['库存'] || []
				this.scrollMenu = res.result['库位'] || [];
				let material_obj = {};
				let stock_obj = {};
				scrollData.forEach(v => {
					v.mname = v.material_id[1];
					material_obj[v.material_id[0]] = v;
					stock_obj[v.id] = v;
				})
				this.scrollData = scrollData;
				this.material_obj = material_obj;
				this.bagList.forEach(v=>{
					if(!material_obj[v.id]){
						uni.showModal({
							title: '提示',
							content:  `${v.name}没有库存，暂不允许出库。`,
							showCancel:false,
							success: function (res) {
								uni.navigateBack();
							}
						});
					}
				})
			},

			getData() {
				uni.showLoading({
					title: "加载中",
				});
				new_stock_out()
					.then((res) => {
						this.getData_callback(res);
					})
					.catch(() => {})
					.finally(() => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					});
			},
		},
		onLoad(d) {
			if(d.bagList){
				console.log(d.bagList);
				this.bagList = JSON.parse(d.bagList) || [];
				this.scrollInitValue = this.bagList;
			}
			this.status = d.status;
			this.id = Number(d.id) || 0;
			this.getData();
		},
		onShow() {},
		onReady() {
			uni.createSelectorQuery().select('#topBox').boundingClientRect(data => {
				let topBoxHeght = data.height;
				uni.createSelectorQuery().select('#bottomBox').boundingClientRect(data2 => {
					let bottomBoxHeight = data2.height;
					this.scrollHeight = this.getClineHeight() - topBoxHeght - bottomBoxHeight;
				}).exec()
			}).exec()
		},
		onPullDownRefresh() {
			this.getData();
		},
	};
</script>

<style lang="scss" scoped>
	@import "./stockOutFood.scss";
</style>